<template>
   <section class="content-section">
      <el-alert
              title="试卷已经提交！！！"
              type="error"
              center
              show-icon
              v-show="warming==1">
      </el-alert>
      <el-card v-for="item in myExamList" class="exam-card">
         <div slot="header" class="clearfix">
            <span>考试名称：{{item.name}}</span><br/>
            <span>考试开始时间：{{item.starttime}}</span><br/>
            <span>考试结束时间：{{item.finishtime}}</span>
         </div>
         <span style="color: red;float: right; padding: 3px 0" v-show="item.state==1" >考试还未开始</span>
         <el-button @click="goTotakeexam(item.id,item.name,item.state)" style="float: right;" type="primary" v-show="item.state==2" round>
            进入考试
         </el-button>
         <span style="color: blue;float: right; padding: 3px 0" v-show="item.state==3" >考试已结束</span>
      </el-card>
   </section>
</template>

<script>
    export default {
        name: "student-exam",
        data(){
            return{
                myExamList:[],
                studentid:"",
                total:'',
                warming:0,
            }
        },

        methods:{
            getMyExamList(){
               this.$http.get("api/exam/findByStudentid/"+this.studentid).then((res)=>{
                   this.myExamList = res.data.data;
                   this.total=this.myExamList.length;
                   let i = 0;
                   for (i = 0; i < this.total; i++) {
                       var date = new Date(this.myExamList[i].starttime);
                       var hour = date.getHours();
                       var min = date.getMinutes();
                       var sec = date.getSeconds();
                       hour = parseInt(hour) < 10 ? "0" + hour : hour;
                       min = parseInt(min) < 10 ? "0" + min : min;
                       sec = parseInt(sec) < 10 ? "0" + sec : sec;
                       let d = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + hour + ":" + min + ":" + sec;
                       this.myExamList[i].starttime = d;

                       date = new Date(this.myExamList[i].finishtime);
                       hour = date.getHours();
                       min = date.getMinutes();
                       sec = date.getSeconds();
                       hour = parseInt(hour) < 10 ? "0" + hour : hour;
                       min = parseInt(min) < 10 ? "0" + min : min;
                       sec = parseInt(sec) < 10 ? "0" + sec : sec;
                       d = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + hour + ":" + min + ":" + sec;
                       this.myExamList[i].finishtime = d;
                   }
               }).catch((error)=>{
                   console.log(error);
               });
            },
            getStudentid(){
                this.user = JSON.parse(localStorage.getItem("CurrentUser"));
                this.$http.get("/api/studentinfo/findByUserid/"+this.user.id).then((res)=>{
                    this.studentid = res.data.data.id;
                    this.getMyExamList();
                }).catch((error)=>{
                    console.log(error);
                });
            },
            goTotakeexam(num,label,state){
                this.$http.post("/api/attendexam/beginExam/"+this.studentid+'/'+num).then((res)=>{
                   if(res.data.data.endtime==null&&state==2) {
                       this.$router.push({path: "/TakeExam", query: {id: num, name: label}});
                   }
                    else{
                        this.warming=1;
                    }
                }).catch((error)=>{
                    console.log(error);
                });
            },
        },
        mounted(){
            this.getStudentid();
        }
    }
</script>

<style scoped>
   .content-section{
      padding:40px;
   }
   .exam-card{
      margin-bottom: 40px;
   }
</style>